HTMLify
index.html
Views: 353 | Author: cody
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Pattern Generator</title> <link rel="stylesheet" href="./style.css"> </head> <body> <!-- partial:index.partial.html --> <div class="col"> <div class="controls"> <h1>Pattern Generator</h1> <h3>Options</h3> <div class="controls__group"> <label for="#angle">Angle</label> <input type="range" min="5" max="85" id="angle" data-input="range"> </div> <div class="controls__group"> <label for="#thickness">Stripe thickness</label> <input type="range" min="2" max="120" step="1" id="thickness" data-input="thickness" value="30"> </div> <div class="controls__group"> <label for="#width">Segment width</label> <input type="range" min="10" max="200" step="1" id="width" data-input="width" value="100"> </div> <div class="controls__group"> <label for="#color1">Primary colour</label> <input type="range" min="0" max="360" step="1" id="color1" data-input="color1" value="100"> </div> <div class="controls__group"> <label for="#color1">Contrast</label> <input type="range" min="50" max="90" step="1" id="contrast" data-input="contrast"> </div> <h3>CSS output</h3> <div class="css" data-output></div> </div> </div> <div class="bg" data-bg></div> <!-- partial --> <script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.19/lodash.min.js'></script><script src="./script.js"></script> </body> </html> |